<!-- 随笔详情 -->
<template>
    <div class="root">
        <div class="title">
            Hello,word
        </div>
        <div class="date">
            2023-36-3
        </div>
        <div class="content">
            They would often take long walks in the moonlight, holding hands and talking about their dreams for the future.
            Alexander promised to always protect and cherish Isabella, and she knew that he was the one she had been waiting
            for all her life.
        </div>
        <div class="fixed-btm">
            <i class="iconfont icon-zuojiantou-" @click="backFn"></i>
            <i class="iconfont icon-aixin" :class="{'active':isLike}" @click="likeFn"></i>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter} from "vue-router"
const isLike=ref(false)
const router=useRouter()
const backFn=()=>{
    router.push("/")
}
const likeFn=()=>{
    isLike.value=!isLike.value
}
</script>

<style lang="scss" scoped>
.root {
    padding: 32px;
    background: $common-lgc;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 100px;

    .title {
        font-weight: 800;
        font-size: 42px;
    }

}

.fixed-btm {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background:$common-lgc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid $boder-light;
    padding:0 32px;
    box-sizing: border-box;
    i{
        font-size: 64px;
    }
}
.content{
    font-size: 32px;
}
.active{
    color: $common-lblue;
}
</style>
